<script>
import {getHouseData, getInspectorData, insertInspection} from "./insertInspectionJs";

export default {
  name: "InsertInspection",
  data() {
    // 如果在不写return之前就运行这个窗口，那么就会报错，表示没有数据可以在页面上显示，就会导致整个系统样式出现问题
    return {
      houseGridData: [], // 内部数据
      inspectorGridData: [],
      houseSearch: {
        id: '', // 房源搜索id
        currentPage: 1,
        pageSize: 5,
        totalNumber: 0,
      },
      inspectorSearch: {
        muuid: '', // 巡查员搜索id
        currentPage: 1,
        pageSize: 5,
        totalNumber: 0,
      },
      huuid: '',
      houseAddress: '',
      muuid: '',
      mName: '',
      inspectionTime: ''
    }
  },
  methods: {
    handleHouseCurrentChange(newPage) {
      this.houseSearch.currentPage = newPage;
      this.getHouseData();
    },
    handleInspectorCurrentChange(newPage) {
      this.inspectorSearch.currentPage = newPage;
      this.getInspectorData();
    },
    closeInsert() {
      this.$emit("closeDialog");
    },
    // 获取房源数据
    getHouseData() {
      const _this = this;
      getHouseData(this.houseSearch).then(res => {
        if (res.code === '200') {
          _this.houseGridData = res.data.data;
          _this.houseSearch.totalNumber = res.data.totalNumber;
        } else {
          _this.$message.error("出错了：" + res.msg);
        }
      }).catch(err => {
        _this.$message.error("系统出错了！");
        console.log(err);
      })
    },
    // 选中当前房源
    selectThis(row) {
      this.huuid = row.huuid;
      this.houseAddress = row.detailAddress;
    },
    // 获取巡查员数据
    getInspectorData() {
      const _this = this;
      getInspectorData(this.inspectorSearch).then(res => {
        if (res.code === '200') {
          _this.inspectorGridData = res.data.data;
          _this.inspectorSearch.totalNumber = res.data.totalNumber;
        } else {
          _this.$message.error("出错了：" + res.msg);
        }
      }).catch(err => {
        _this.$message.error("系统出错了！");
        console.log(err);
      })
    },
    // 选中当前巡查员
    selectInspector(row) {
      this.muuid = row.muuid;
      this.mName = row.name;
    },
    submitInspection(){
      const _this = this;
      insertInspection(_this.muuid,_this.huuid,_this.inspectionTime).then(res => {
        if (res.code === '200') {
          _this.$message.success("添加成功!")
          _this.closeInsert();
        }else{
          _this.$message.error("出错了："+res.msg);
        }
      }).catch(err => {
        _this.$message.error("系统出错了！");
        console.log(err)
      })
    }
  }
}
</script>

<template>
  <div id="ii-main-container" class="ii-main-container">
    <h1>新增巡查派遣</h1>
    <div id="ii-table-container" class="ii-table-container">
      <el-descriptions direction="vertical" :column="3" border>
        <el-descriptions-item label="房源编号" >
          <div style="width: 300px;">
            <el-input v-model="huuid" size="mini" style="width: 280px;" disabled/>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="房源地址">
          <div style="width:300px;">
            <el-input v-model="houseAddress" size="mini" style="width: 280px;" disabled/>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="选择房源">
          <div style="width:50px;">
            <el-popover
              placement="right"
              width="500"
              trigger="click">
              <div id="ii-inside-search">
                <el-input v-model="houseSearch.id" size="mini" placeholder="请输入编号" style="width:200px;"
                          clearable></el-input>
                <el-button @click="getHouseData" type="primary" size="mini">搜索</el-button>
              </div>
              <el-table :data="houseGridData">
                <el-table-column width="150" property="huuid" label="编号"></el-table-column>
                <el-table-column width="80" property="name" label="名称"></el-table-column>
                <el-table-column width="170" property="detailAddress" label="地址"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="selectThis(scope.row)">选择</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                @current-change="handleHouseCurrentChange"
                :current-page="houseSearch.currentPage"
                :page-size="5"
                layout="total, prev, pager, next"
                :total="houseSearch.totalNumber">
              </el-pagination>
              <el-button style="float: right" size="small" slot="reference" @click="getHouseData">选择</el-button>
            </el-popover>
          </div>
        </el-descriptions-item>
        <!--==========================巡查员数据=================================-->
        <el-descriptions-item label="巡查员编号">
          <div style="width: 300px;">
            <el-input v-model="muuid" size="mini" style="width: 280px;" disabled/>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="巡查员姓名">
          <div style="width:300px;">
            <el-input v-model="mName" size="mini" style="width: 280px;" disabled/>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="选择巡查员">
          <div style="width:50px;">
            <el-popover
              placement="right"
              width="500"
              trigger="click">
              <div id="ii-inside-search">
                <el-input v-model="inspectorSearch.muuid" size="mini" placeholder="请输入编号" style="width:200px;"></el-input>
                <el-button type="primary" size="mini">搜索</el-button>
              </div>
              <el-table :data="inspectorGridData">
                <el-table-column width="150" property="muuid" label="编号"></el-table-column>
                <el-table-column width="80" property="name" label="姓名"></el-table-column>
                <el-table-column width="80" property="sex" label="性别"></el-table-column>
                <el-table-column width="80" property="age" label="年龄"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="selectInspector(scope.row)">选择</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                @current-change="handleInspectorCurrentChange"
                :current-page="inspectorSearch.currentPage"
                :page-size="5"
                layout="total, prev, pager, next"
                :total="inspectorSearch.totalNumber">
              </el-pagination>
              <el-button style="float: right" size="small" slot="reference" @click="getInspectorData">选择</el-button>
            </el-popover>
          </div>
        </el-descriptions-item>
        <!--===========================================================-->
        <el-descriptions-item label="巡查时间">
          <el-date-picker
            v-model="inspectionTime"
            type="datetime"
            placeholder="选择巡查时间"
            default-time="08:00:00">
          </el-date-picker>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div id="ii-button-container" class="ii-button-container">
      <el-button @click="closeInsert" type="primary" style="width: 200px;" plain>关闭</el-button>
      <el-button @click="submitInspection" type="primary" style="width: 200px;margin-left:60px;">提交</el-button>
    </div>
  </div>
</template>

<style scoped>
@import "insertInspectionCss.css";
</style>
